<template>
	<view class="wrap">
		<!-- 小tabBar -->
		<view class="tabBar">
			<view class="tabBar-l">
				<view :class="flag==index?'active':''" v-for="(item,index) in myList" :key="index" @click="tab(index)" >{{item}}</view>
			</view>
			<view class="tabBar-r">
				<view @click="toggle('bottom')"><image src="../../static/jin/分类.png"></image></view>
				<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" >
					<view class="popup-box">
						<view class="title">全部频道</view>
						<view class="my">
							<view class="my-title">
								<text>我的频道</text>
								<text>点击进入频道</text>
							</view>
							<view class="bj" @click="bj">
								<text>{{bjFlag==true?'编辑':'完成'}}</text>
							</view>
						</view>
						<view class="my-list">
							<view v-for="(item,index) in myList" :key="index" @click="bj2(index)">{{item}}<text v-if="bjFlag==false&&index!=0">×</text></view>
						</view>
						<view class="hot">
							<view class="hot-title">
								<text>热门频道</text>
								<text>点击添加频道</text>
							</view>
						</view>
						<view class="hot-list">
							<view v-for="(item,index) in hotList" :key="index" @click="hot(index)">{{item}}<text>+</text></view>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<view class="xz" v-show="flag==0">
			<!-- 分类列表 -->
			<view class="classify-list">
				<view class="list">
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>文档</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>代办</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>日历</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>云盘</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>邮箱</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>直播</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>闪会</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>日志</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>便签</view>
					</view>
					<view class="box">
						<image src="../../static/jin/wendang.jpg"></image>
						<view>钉钉塔</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tj" v-show="flag==1">推荐</view>
		<view class="rs" v-show="flag==2">人事</view>
		<view class="cio" v-show="flag==3">CIO</view>
		<view class="gl" v-show="flag==4">管理</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barList:["协作","推荐"],
				myList:["协作","推荐"],
				hotList:["人事","CIO","管理"],
				flag:0,
				type:"bottom",
				bjFlag:true
			}
		},
		onLoad() {
		
		},
		methods: {
			tab(index){
				this.flag=index
			},
			toggle(type){
				this.type=type;
				this.$refs['popup'].open()
			},
			hot(index){
				console.log(index)
				let a = this.hotList.splice(index,1)
				this.myList.push(a.toString())
			},
			bj(){
				this.bjFlag=!this.bjFlag
			},
			bj2(index){
				if(this.bjFlag==false&&index!==0){
					let a = this.myList.splice(index,1)
					this.hotList.push(a.toString())
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.wrap{
		background-color: #f0eff4;
		.tabBar{
			padding:25rpx 40rpx 10rpx 40rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tabBar-l{
				display: flex;	
				view{
					font-size: 35rpx;
					line-height: 55rpx;
					color:#7d7d7d;
					margin-right: 45rpx;	
				}
				.active{
					border-bottom: 6rpx solid #000;
					color:#000;
				}
			}
			.tabBar-r{
				image{
					width:30rpx;
					height:25rpx;
				}
				.popup-box{
					height:950rpx;
					background-color: #fff;
					padding:0 35rpx;
					.title{
						font-size: 32rpx;
						text-align: center;
						line-height: 100rpx;
					}
					.my{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.my-title{
							text:nth-child(1){
								font-size: 28rpx;
								margin-right: 25rpx;
							}
							text:nth-child(2){
								font-size: 22rpx;
								color:#a2a1a6;
							}
						}
						.bj{
							font-size: 28rpx;
							color:#2a77bc;
						}
					}
					.my-list{
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						margin:35rpx 0;
						view{
							margin-bottom: 30rpx;
							width:160rpx;
							height:70rpx;
							line-height: 70rpx;
							text-align: center;
							background-color: #eae9ee;
							margin-right: 20rpx;
							position:relative;
							text{
								position: absolute;
								top:-25rpx;
								right:0;
								&.active{
									display: none;
								}
							}
						}
						view:nth-child(1){
							color:#79797b;
						}
					}
					.hot{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.hot-title{
							text:nth-child(1){
								font-size: 28rpx;
								margin-right: 25rpx;
							}
							text:nth-child(2){
								font-size: 22rpx;
								color:#a2a1a6;
							}
						}
					}
					.hot-list{
						display: flex;
						align-items: center;
						margin:35rpx 0;
						view{
							width:160rpx;
							height:70rpx;
							line-height: 70rpx;
							text-align: center;
							border:1rpx dashed #acabb0;
							border-radius: 5rpx;
							margin-right: 20rpx;
							position:relative;
							text{
								position: absolute;
								top:-25rpx;
								right:0;
							}
						}
					}
				}
			}
		}
		.xz{
			.classify-list{
				padding:15rpx;
				.list{
					display: flex;
					align-items: center;
					background-color: #fff;
					flex-wrap: wrap;
					.box{
						padding:32rpx 25rpx 0 25rpx;
						image{
							width:93rpx;
							height: 93rpx;
						}
						view{
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
